{% extends "base.html" %}
{% load cms_tags %}
{% load i18n %}

{% block extrastyle %} {{ block.super }}
{% endblock %}

{% block extra_js %}
{{ block.super }}
{% if signupOnGoing and errCode != 'InvalidSignupKey'%}
	<script src="{{ STATIC_URL }}js/jquery.eventsignup.js"></script>
	<script src="{{ STATIC_URL }}js/jquery.eventsignup.modify.js"></script>
	<script type="text/javascript">
	$(document).keypress(function(e) {
		if(e.which == 13) {
			return false;
		}
	});
	$(document).ready(function(){
		// initialize selected display text
		$('select').parent().children('input').each(
			function(){$(this).parent().parent().children('.value').text( $(this).siblings().children('option[value='+ $(this).val() +']').text() );}
		);
		
		$('table a.btn').click(function(){
			var inputId, classList, classStr, i;
			
			classList = $(this.classList);
			for( i=0; i<classList.length; ++i){
				classStr = classList[i];
				if( classStr.indexOf('_id') >= 0 ) break;
			}
			
			if( i >= classList.length ) return;
			
			$input = $('#'+classStr);
			$inputContainer = $('#'+classStr).parent();
			$val = $inputContainer.parent().children('.value');
			
			// hide current value
			$val.attr('style', 'display:none');
			// hide btn
			$(this).attr('style','display:none');
			
			// show input
			$inputContainer.attr('style','');
			$select = $inputContainer.children('select');
			
			var isSelector = 0 != $select.length;
			
			// set current value into input field
			if( isSelector )
			{
				$select.children('option[value='+$input.val()+']').attr('selected','selected');
				$select.children('option[value!='+$input.val()+']').removeAttr('selected');
				$select.focusout( selectFocusOut );
				$select.focus();
			}
			else
			{
				$input.attr('value', $val.text());
				// add focus out callback
				$input.focusout( inputFocusOut );
				$input.focus();
			}
		});
	});
	
	function inputFocusOut()
	{
		// set value back
		$val = $(this).parent().parent().children('.value');
		$val.text( $(this).val() );
		// hide input
		$(this).parent().attr('style', 'display:none');
		// show value
		$val.attr('style', '');
		// show btn
		$('.'+ $(this).attr('id')).attr('style', '');
		checkHasModify();
	}

	function selectFocusOut()
	{
		// set value back
		$val = $(this).parent().parent().children('.value');
		$selectedOp = $(this).children('option[selected="selected"]');
		$val.text( $selectedOp.text() );
		$(this).parent().attr('style', 'display:none');
		// show value
		$val.attr('style', '');
		// show btn
		$('.'+ $(this).parent().children('input').attr('id')).attr('style', '');
		checkHasModify();
	}

	var oriVals = {
			"signupKey":"{{pData.signupKey}}",
			"name":"{{pData.name}}",
			"gender":"{{pData.gender}}",
			"pid":"{{pData.pid}}",
			"bday":"{{pData.bday|date:'Y-m-d'}}",
			"phoneNum":"{{pData.phoneNum}}",
			"nationality":"{{pData.nationality}}",
			"email":'{{pData.email}}',
			"estimateTime":"{{pData.estimateTime}}",
			"emgcyContact":"{{pData.emgcyContact}}",
			"emgcyContPhone":"{{pData.emgcyContPhone}}",
		};
	function checkHasModify()
	{
		// get current val
		var hasChange;
		hasChange = false;
		$('#eventSignupForm table input').each(function(){
			if( oriVals[$(this).attr('name')] != $(this).val() )
			{
				hasChange = true;
				$(this);
			}
		});
		if( hasChange )
		{
			$('#eventSignupModify_submit').removeAttr('disabled');
			$('.modifySucceed').hide();
		}
		else
		{
			$('#eventSignupModify_submit').attr('disabled', 'disabled');
		}
	}
	</script>
{% endif %}
{% endblock %}

{% block base_content %}
	<div class="container">
		{% include "component/event/event-breadcrumb-modify.html" %}
		<div class="row">
			<div class="col-md-12">
				<!-- content -->
				<h2 class="text">{% trans "Event Signup Info Modication" %}</h2>
				<div class="page-header"><h3 class="text-info">{{ event.name }}</h3></div>
			</div>
		</div>
		<h4 class="text-danger invalidSignupKey" {% if errCode != 'InvalidSignupKey'%}style="display:none" {% endif %}><i class="fa fa-ban"></i> {% trans "Invalid signup key." %}</h4>
		{% if modifySucceed %}
			<div class="alert alert-success modifySucceed"><h5><i class="fa fa-check"></i> {% trans "Modification applied." %}</h5></div>
		{% endif %}
		{% if signupOnGoing and errCode != 'InvalidSignupKey'%}
			<div class="row">
				<div class="col-md-12">
					{% include "component/event/event-signup-errormsg.html" %}
					<form class="form" id="eventSignupForm" method="POST" role="form">
						{% csrf_token %}
						<input type="hidden" name="event_id" value="{{ event.id}}">
						<table class="table table-striped table-hover">
							<thead>
							</thead>
							<tbody>
								<tr>
									<td style="font-weight:bold">{% trans "Serial number" %}</td>
									<td class="text-danger">
										<div class="value"><strong>{{pData.signupKey}}</strong></div>
										<div class="controls" style="display:none">
											<input type="hidden" name="signupKey" value="{{pData.signupKey}}">
										</div>
									</td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td style="font-weight:bold">{% trans "Name" %}</td>
									<td>
										<div class="value">{{pData.name}}</div>
										<div class="controls" style="display:none">
											<input type="text" id="name_id" name="name" value={{pData.name}}>
										</div>
									</td>
									<td></td>
									<td style="font-weight:bold">{% trans "Gender" %}</td>
									<td>
										<div class="value"></div>
										<div class="controls" style="display:none">
											<input type="hidden" id="gender_id" name="gender" style="display:none" value={{pData.gender}}>
											<select class="from-control selectpicker" id="gender_select">
												<option selected="selected" value="Male">{% trans "Male" %}</option>
												<option value="Female">{% trans "Female" %}</option>
											</select>
										</div>
									</td>
									<td><a class="btn btn-info gender_id"><i class="fa fa-pencil "></i> </a></td>
								</tr>
								<tr>
									<td style="font-weight:bold">{% trans "Personal id" %}</td>
									<td>
										<div class="value">{{pData.pid}}</div>
										<div class="controls" style="display:none">
											<input type="text" class="from-control" id="pid_id" name="pid" value={{pData.pid}}>
										</div>
									</td>
									<td></td>
									<td style="font-weight:bold">{% trans "Birthday" %}</td>
									<td>
										<div class="value">{{pData.bday|date:"Y-m-d"}}</div>
										<div class="controls" style="display:none">
											<input type="date" class="from-control" id="bday_id" name="bday" value={{pData.bday|date:"Y-m-d"}}>
										</div>
									</td>
									<td><a class="btn btn-info bday_id"><i class="fa fa-pencil "></i> </a></td>
								</tr>
								<tr>
									<td style="font-weight:bold">{% trans "Phone Number" %}</td>
									<td>
										<div class="value">{{ pData.phoneNum }}</div>
										<div class="controls" style="display:none">
											<input type="text" class="from-control" id="phoneNum_id" name="phoneNum" value={{pData.phoneNum}}>
										</div>
									</td>
									<td><a class="btn btn-info phoneNum_id"><i class="fa fa-pencil "></i> </a></td>
									<td style="font-weight:bold">{% trans "Nationality" %}</td>
									<td>
										<div class="value"></div>
										<div class="controls" style="display:none">
											<input type="hidden" id="country_id" name="nationality" style="display:none" value={{pData.nationality}}>
											{% include "component/country-selector.html" %}
										</div>
									</td>
									<td><a class="btn btn-info country_id"><i class="fa fa-pencil "></i> </a></td>
								</tr>
								<tr>
									<td style="font-weight:bold">Email</td>
									<td>
										<div class="value">{{ pData.email }}</div>
										<div class="controls" style="display:none">
											<input type="text" class="from-control" id="email_id" name="email" value={{pData.email}}>
										</div>
									</td>
									<td><a class="btn btn-info email_id"><i class="fa fa-pencil "></i> </a></td>
									<td style="font-weight:bold">{% trans "Estimate time" %}</td>
									<td>
										<div class="value"></div>
										<div class="controls" style="display:none">
											<input type="hidden" id="estimateTime_id" name="estimateTime" style="display:none" value={{ pData.estimateTime }}>
											<select class="form-control selectpicker" id="estimateTime_select">
												<option value="unknown" selected="selected">{% trans "unknown" %}</option>
												<option value="below 18:00">{% trans "below" %} 18:00</option>
												<option value="18:00~20:00">18:00~20:00</option>
												<option value="20:00~22:00">20:00~22:00</option>
												<option value="22:00~25:00">22:00~25:00</option>
												<option value="over 25:00">{% trans "over" %} 25:00</option>
											</select>
										</div>
									</td>
									<td><a class="btn btn-info estimateTime_id"><i class="fa fa-pencil "></i> </a></td>
								</tr>
								<tr>
									<td style="font-weight:bold">{% trans "Emergency contact person" %}</td>
									<td>
										<div class="value">{{ pData.emgcyContact }}</div>
										<div class="controls" style="display:none">
											<input type="text" class="from-control" id="emgcyContact_id" name="emgcyContact" value={{pData.emgcyContact}}>
										</div>
									</td>
									<td><a class="btn btn-info emgcyContact_id"><i class="fa fa-pencil "></i> </a></td>
									<td style="font-weight:bold">{% trans "Emergency contact person's phone number" %}</td>
									<td>
										<div class="value">{{ pData.emgcyContPhone }}</div>
										<div class="controls" style="display:none">
											<input type="text" class="from-control" id="emgcyContPhone_id" name="emgcyContPhone" value={{pData.emgcyContPhone}}>
										</div>
									</td>
									<td><a class="btn btn-info emgcyContPhone_id"><i class="fa fa-pencil "></i> </a></td>
								</tr>
							</tbody>
						</table>
						{% include "component/event/event-signup-errormsg.html" %}
						<div class="form-group">
							<div class="controls">
								<a type="button" class="btn btn-success" id="eventSignupModify_submit"  disabled='disabled'>{% trans "Modify" %}</a>
								<a type="button" class="btn btn-default" href="/events/{{event.id}}/" style="margin-left:5px;">{% trans "Back to event description" %}</a>
							</div>
							<div class="progress progress-success progress-striped active" style="display:none;">
								<div class="progress-bar" style="width: 100%;"></div>
							</div>
						</div>
					</form>
					<form class="form" id="eventSignupDisclaimerForm" method="POST">
						{% csrf_token %}
						<div class="page-header"></div>
						<h3 class="text-info">{% trans "Signup Disclaimer"%}</h3>
						<input type="hidden" name="event_id" value="{{ event.id}}">
						<input type="hidden" name="signupKey" value="{{pData.signupKey}}">
						<div class="row">
							<div class="col-md-12">
								<p> {% trans "Captcha" %} </p>
								<div class="form-group">
								{{recaptcha_widget_signup}}
								</div>
								<div class="alert alert-danger signup_disclaimer_errormsg_eventid" style="display:none;">{% trans "Event does not exist." %}</div>
								<div class="alert alert-danger signup_disclaimer_errormsg_captcha" style="display:none;">{% trans "Captcha failed." %}</div>
								<div class="alert alert-danger signup_disclaimer_errormsg_parti" style="display:none;">{% trans "Participant does not exist." %}</div>
								<div class="alert alert-danger signup_disclaimer_errormsg_invalidSignupKey" style="display:none;">{% trans "Invalid signup key." %}</div>
								<div class="disclaimer-footer">
									<div class="controls">
										<button id="eventSignupModify_delete" class="btn btn-danger">{% trans "Disclaimer" %} *</button>
										<p><small class="text-muted">* {% trans "NOTE: disclaimer can't be recovered." %}</small></p>
									</div>
									<div class="progress progress-success progress-striped active" style="display:none;">
										<div class="progress-bar" style="width: 100%;"></div>
									</div>
								</div>
							</div>
						</div>
					</form>
				</div>
			</div>
		{% elif signupExpired and modifySucceed == False %}
			<h4 class="text-danger"><i class="fa fa-ban"></i> {% trans "Signup have closed." %}</h4>
		{% endif %}
	</div>
	{% placeholder template_EventSignupModify_content %}
{% endblock %}